<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ - 题目列表</title>
    <link rel="stylesheet" href="./css/navbar.css">
    <link rel="stylesheet" href="./css/all_questions.css">
    <script>
        function filterQuestions() {
            const level = document.getElementById("questionLevel").value;
            const type = document.getElementById("questionType").value;
            const rows = document.querySelectorAll(".question-list table tr.item");

            rows.forEach(row => {
                const rowLevel = row.querySelector("td:nth-child(3)").textContent;
                const rowType = row.querySelector("td:nth-child(4)").textContent;
                const levelMatch = (level === "all" || rowLevel === level);
                const typeMatch = (type === "all" || rowType === type);
                row.style.display = levelMatch && typeMatch ? "" : "none";
            });
        }
    </script>
</head>

<body>
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>
    
    <div class="container">
        <div class="question-list">
            <h1>题目列表</h1>
            <div class="filter">
                <label for="questionLevel">难度:</label>
                <select id="questionLevel" onchange="filterQuestions()">
                    <option value="all">全部</option>
                    <option value="简单">简单</option>
                    <option value="中等">中等</option>
                    <option value="困难">困难</option>
                </select>
                <label for="questionType">类型:</label>
                <select id="questionType" onchange="filterQuestions()">
                    <option value="all">全部</option>
                    <option value="数学">数学</option>
                    <option value="栈">栈</option>
                    <option value="排序">排序</option>
                    <option value="输入输出">输入输出</option>
                </select>
            </div>

            <table>
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>难度</th>
                    <th>类型</th>
                </tr>
                {{#question_list}}
                <tr class="item">
                    <td>{{number}}</td>
                    <td><a href="/question/{{number}}">{{title}}</a></td>
                    <td>{{level}}</td>
                    <td>{{type}}</td>
                </tr>
                {{/question_list}}
            </table>
        </div>

        <div class="footer">
            <h4>&copy; aiyimu</h4>
        </div>
    </div>
</body>

</html>
